import './full-color-pannel.less';
import { mainColor, DefaultPastColor, commonColor } from './color';
import { ColorPicker } from 'zw-color-pannel';
const template = `
    <div class="main-colors">
        
    </div>
    <div class="default-colors">
    </div>
    <div class="past-color-centent">
        <div class="color-title">
        最近使用
        </div>
        <div class="past-color-list">
            
        </div>
    </div>
    <div class="no-select-color-content">
        <div class="no-color-example">
        </div>
        <div class="no-color-desc">
        无填充色
        </div>
    </div>
    <div class="more-color-content">
        <div class="color-pannel-icon">
            <svg t="1640355686599" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7784" width="24" height="24"><path d="M512 1024C229.888 1024 0 794.112 0 512S229.888 0 512 0s512 229.888 512 512c0 30.72-2.56 60.928-8.192 90.624-11.776 66.56-95.232 67.584-175.616 68.608-49.664 0.512-111.616 1.536-127.488 20.992-24.576 29.696-22.528 85.504-20.48 139.776 3.072 77.312 6.144 164.352-77.312 181.76-33.28 6.656-68.096 10.24-102.912 10.24z m0-970.24c-252.416 0-458.24 205.312-458.24 458.24s205.312 458.24 458.24 458.24c31.232 0 61.952-3.072 92.16-9.216 34.816-7.168 37.376-46.08 34.304-126.976-2.048-61.44-4.608-130.56 32.768-176.128 32.256-38.912 98.304-39.424 168.448-40.448 50.176-0.512 118.784-1.536 122.88-24.576 4.608-26.624 7.168-53.76 7.168-80.896 0.512-252.416-205.312-458.24-457.728-458.24z" fill="#333333" p-id="7785"></path><path d="M462.336 319.488c-61.44 0-111.616-50.176-111.616-111.616s50.176-111.616 111.616-111.616 111.616 50.176 111.616 111.616-49.664 111.616-111.616 111.616z m0-169.472c-31.744 0-57.856 26.112-57.856 57.856s26.112 57.856 57.856 57.856c31.744 0 57.856-26.112 57.856-57.856s-25.6-57.856-57.856-57.856zM246.784 475.136c-54.784 0-99.84-44.544-99.84-99.84 0-54.784 44.544-99.84 99.84-99.84 54.784 0 99.84 44.544 99.84 99.84-0.512 54.784-45.056 99.84-99.84 99.84z m0-145.92c-25.088 0-45.568 20.48-45.568 45.568s20.48 45.568 45.568 45.568 45.568-20.48 45.568-45.568-20.48-45.568-45.568-45.568zM738.816 484.352c-68.608 0-123.904-55.808-123.904-123.904s55.808-123.904 123.904-123.904c68.096 0 123.904 55.808 123.904 123.904s-55.808 123.904-123.904 123.904z m0-194.048c-38.4 0-70.144 31.232-70.144 70.144 0 38.4 31.232 70.144 70.144 70.144S808.96 399.36 808.96 360.448c0-38.4-31.744-70.144-70.144-70.144zM270.848 693.248c-41.472 0-75.264-33.792-75.264-75.264S229.376 542.72 270.848 542.72s75.264 33.792 75.264 75.264-33.792 75.264-75.264 75.264z m0-97.28c-11.776 0-21.504 9.728-21.504 21.504s9.728 21.504 21.504 21.504c11.776 0 21.504-9.728 21.504-21.504s-9.728-21.504-21.504-21.504zM464.896 826.368c-34.816 0-63.488-28.672-63.488-63.488 0-34.816 28.16-63.488 63.488-63.488s63.488 28.16 63.488 63.488-28.672 63.488-63.488 63.488z m0-72.704c-5.12 0-9.216 4.096-9.216 9.216s4.096 9.216 9.216 9.216 9.216-4.096 9.216-9.216c0-4.608-4.096-9.216-9.216-9.216z" fill="#333333" p-id="7786"></path></svg>
        </div>
        <div class="more-color-desc">
        自定义颜色
        </div>
        <div class="down-icon">
            <svg t="1640356286635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8574" width="10" height="10"><path d="M941.808046 195.931415 512 828.068585 82.191954 195.931415Z" p-id="8575"></path></svg>
        </div>
        <div class="free-color-container">
        </div>
    </div>
`;
function createColorItem(color: string) {
    let item = document.createElement('div') as HTMLElement;
    item.setAttribute('class', 'color-item');
    item.setAttribute('zColor', color);
    item.setAttribute('style', `background-color: ${color}`);
    return item;
}
export class FullColorPannel{
    protected container: HTMLElement;
    constructor(protected callback: (color: string) => void) {

    }
    public getDom() {
        this.container = document.createElement('div') as HTMLElement;
        this.container.setAttribute('class', 'z-full-color-pannel-container');
        this.container.innerHTML = template;
        let mainColorsEle = this.container.querySelector('.main-colors');
        for(let color of mainColor) {
            mainColorsEle.append(createColorItem(color));
        }
        mainColorsEle.addEventListener('click',this.colorSelect.bind(this))
        let defaultColorEle = this.container.querySelector('.default-colors');
        for(let i = 0; i < commonColor[0].length; i++) {
            for(let j = 0; j < commonColor.length;j++) {
                defaultColorEle.append(createColorItem(commonColor[j][i]));
            }
        }
        defaultColorEle.addEventListener('click', this.colorSelect.bind(this));
        let pastColorEle = this.container.querySelector('.past-color-list');
        for(let color of DefaultPastColor) {
            pastColorEle.append(createColorItem(color))
        }
        pastColorEle.addEventListener('click', this.colorSelect.bind(this));
        let colorPicker = new ColorPicker();
        colorPicker.selectColorChange$.subscribe((color) => {
            let list = pastColorEle.querySelectorAll('.color-item');
            list.item(list.length - 1).remove();
            let colorItem = createColorItem(`rgba(${color.r},${color.g},${color.b},${color.a * 100})`);
            pastColorEle.insertBefore(colorItem, list.item(0))
            // pastColorEle.(colorItem);
        });
        let colorPickerDom = colorPicker.getContainerDom();
        this.container.querySelector('.free-color-container').append(colorPickerDom);
        
        return this.container; 
    }
    protected colorSelect(e: Event) {
        let target = e.target as HTMLElement;
        if(!target.classList.contains('color-item')) {
            return;
        }
        this.container.querySelectorAll('.color-item').forEach(item => {
            item.classList.remove('color-item-active')
        })
        target.classList.add('color-item-active');
        this.callback(target.getAttribute('zColor'))
    }
}